<template>
	<view>
		<uni-nav-bar :fixed="true" :statusBar="true" @click-right="openAdd" :border="false">
			<!-- 左侧按钮 -->
			<block slot="left">
				<view class="nav-left">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</block>
			
			<!-- 中间 -->
			<view class="zhongjian">
				<view class="guanzhu " v-for="(tab,index) in tabBars" :key="tab.id"  @click="tabchange(index)" :class="{active:tabIndex==index}">{{tab.name}}
					<view v-if="tabIndex==index" class="nav-bar-line"></view>
				</view>
				
			</view>
			<!-- 右边 -->
			<block slot='right'>
				<view class="nav-right">
					<view class="icon iconfont icon-bianji1 "></view>
				</view>
			</block>
			
			
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components:{
			uniNavBar
		},
		props:{
			tabIndex:Number,
			tabBars:Array
		},
		data() {
			return {
				
			}
		},
		methods: {
			tabchange(index){
				this.$emit('change-tab',index)
				
			},
			del(index){
				this.list.splice(index,1)
			}
		}
	}
</script>

<style scoped>
.nav-right>view,.nav-left > view {
	font-size: 50upx;
}
.nav-left > view {
	color:#ff9616;
}
.nav-right{
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
}
.nav-left {
	margin-left: 20upx;
}
.zhongjian {
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: -25upx;
}
.zhongjian > view {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32upx;
	padding: 0 20upx;
	position: relative;
	color:#999;
}
.active {
	color:#333!important;
	font-weight: 700;
}
.nav-bar-line {
	position: absolute;
	bottom:3upx;
	border-radius: 20upx;
	width:70upx;
	border-top:5upx solid #FF0000;
	border-bottom: 5upx solid #FF0000;
}
</style>
